<template>
	<div class="page" id="dataScreen">
		<!-- <el-button class="test" @click="setCenter"></el-button> -->
		<!-- <div class="backgrountMap">
			<div id='allmap' >
				<baidu-map scroll-wheel-zoom :center="mapCenter" :zoom="12" @ready='mapReady' class="map" map-type="BMAP_HYBRID_MAP">
					<my-overlay @overClick='overClick' :ref="'overlay'+index" v-for="(item,index) in overlayList" :key="index" :position="item" :text="item.name" :active="false" @mouseover.native="active = true" @mouseleave.native="active = false">
					</my-overlay>
				</baidu-map>
			</div>
		</div> -->
		<div class="bg flex-center">
			<img class="bgbg" mode='widthFix' src="@/assets/icon/dataScreen/bg.png" alt="" />
			<img class="bgMap" mode='widthFix' src="@/assets/icon/dataScreen/map.png" alt="" />

		</div>
		<div class="content" v-if="true">
			<div class="top">
				<!-- <div class="t1">教育系统自然灾害预警</div> -->
				<div class="datepicker">
					<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="dataParams.date" align="right" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="initData">
					</el-date-picker>
				</div>
			</div>
			<div class="left flex-column">
				<div class="block1">
					<div class="title">感知预警</div>

					<div class="gzsb cursor" @click="messageDetailShow"><span class="font2">感知设备</span> <span class="font1">116</span></div>
					<div class="flex-between" style="margin-top:0.3rem;padding-right:0.4rem;margin-left:0.1rem">
						<div class="flex-row flex-alignCenter">
							<img style="width:0.48rem;margin-right:0.16rem" mode='widthFix' src="@/assets/icon/dataScreen/zcsb.png" alt="" />
							<div class="flex-column flex-center">
								<div class="f3">116</div>
								<div class="f4">正常设备</div>
							</div>
						</div>
						<div class="flex-row flex-alignCenter">
							<img style="width:0.48rem;margin-right:0.16rem" mode='widthFix' src="@/assets/icon/dataScreen/ycsb.png" alt="" />
							<div class="flex-column flex-center">
								<div class="f3">125</div>
								<div class="f4">异常设备</div>
							</div>
						</div>

					</div>
					<div class="hjjh"><span class="font2">汇聚交互</span> <span class="font1">125</span></div>
					<div class="flex-between" style="margin-top:0.3rem;padding-right:0;margin-left:0.1rem">
						<div class="flex-row flex-alignCenter">
							<img style="width:0.48rem;margin-right:0.16rem" mode='widthFix' src="@/assets/icon/dataScreen/mhww.png" alt="" />
							<div class="flex-column flex-center">
								<div class="f3">125</div>
								<div class="f4">民呼我为</div>
							</div>
						</div>
						<div class="flex-row flex-alignCenter">
							<img style="width:0.48rem;margin-right:0.16rem" mode='widthFix' src="@/assets/icon/dataScreen/zhhc.png" alt="" />
							<div class="flex-column flex-center">
								<div class="f3">125</div>
								<div class="f4">智慧河长</div>
							</div>
						</div>
						<div class="flex-row flex-alignCenter">
							<img style="width:0.48rem;margin-right:0.16rem" mode='widthFix' src="@/assets/icon/dataScreen/zhhb.png" alt="" />
							<div class="flex-column flex-center">
								<div class="f3">125</div>
								<div class="f4">智慧环保</div>
							</div>
						</div>

					</div>
					<div class="xxxj2"><span class="font2">线下巡检</span> <span class="font1">125</span></div>
					<div class="flex-between" style="margin-top:0.3rem;padding-right:0;margin-left:0.1rem">
						<div class="flex-row flex-alignCenter">
							<img style="width:0.48rem;margin-right:0.16rem" mode='widthFix' src="@/assets/icon/dataScreen/mhww.png" alt="" />
							<div class="flex-column flex-center">
								<div class="f3">125</div>
								<div class="f4">线下巡检</div>
							</div>
						</div>

					</div>
				</div>
				<div class="block2">
					<div class="title">决策处置</div>
					<div class="b6 flex-between flex-center" @click="otherPlacesShow">
						<div class="flex-row flex-alignCenter cursor">
							<img style="width:0.5rem;margin-right:0.16rem" mode='widthFix' src="@/assets/icon/dataScreen/lsqx.png" alt="" />
							总抢险数
						</div>
						<div class="f5">286</div>
					</div>
					<div class="gridWrap" style="margin-top:0.1rem">
						<div class="b8 flex-between flex-center">
							<div class="f6">断裂</div>
							<div class="f7">42</div>
						</div>
						<div class="b8 flex-between flex-center">
							<div class="f6">破损</div>
							<div class="f8">34</div>
						</div>
						<div class="b8 flex-between flex-center">
							<div class="f6">堵塞</div>
							<div class="f9">67</div>
						</div>
						<div class="b8 flex-between flex-center">
							<div class="f6">垮塌</div>
							<div class="f7">82</div>
						</div>
						<div class="b8 flex-between flex-center">
							<div class="f6">错位</div>
							<div class="f8">61</div>
						</div>

					</div>
					<div class="list">
						<div class="wrap1 flex-between flex-center">
							<div class="flex-row flex-alignCenter">
								<!-- <div class="f10">保护区内</div> -->
								<div class="f11">北碚区状元碑污水设施管网，发生管道破损，污水溢流......</div>
							</div>
							<div class="f12">2025-03-06 16:36 </div>
						</div>
						<div class="wrap1 flex-between flex-center">
							<div class="flex-row flex-alignCenter">
								<!-- <div class="f10">保护区内</div> -->
								<div class="f11">北碚区温泉路街道，发生井盖堵塞，水位异常上升...... </div>
							</div>
							<div class="f12">2025-03-03 10:28
							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="center">
				<div class="block5">
					<div class="title">KPI指标</div>
					<div class="flex-between flex-alignCenter">
						<div class="wrap2 flex-column ">
							<div class="f13">污水收集率</div>
							<div class="flex-between flex-alignCenter">
								<div class="f14">83%</div>
								<div class="f15">目标88%</div>
							</div>
						</div>
						<div class="wrap2 flex-column ">
							<div class="f13">污水设施问题按期处置率</div>
							<div class="flex-between flex-alignCenter">
								<div class="f14">83%</div>
								<div class="f15">目标88%</div>
							</div>
						</div>
						<div class="wrap2 flex-column ">
							<div class="f13">污水设施巡查覆盖率</div>
							<div class="flex-between flex-alignCenter">
								<div class="f14">83%</div>
								<div class="f15">目标88%</div>
							</div>
						</div>

					</div>
				</div>
				<div class="block6" v-if="block6_1">
					<div class="f31 cursor" @click="block6_1 = false">x</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">绑定设备：</div>
						<div class="f26">圣景汇美城网设备01</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">设备名称：</div>
						<div class="f26">水质检测仪01</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">COD传感器：</div>
						<div class="f26">100mg/L、Equiv、KHP、分辨率：0.1mg/L、精度±5%</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">氨氮传感器：</div>
						<div class="f26">20mg/L、精度±10%，分辨率：0.1mg/L</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">是否有水流出：</div>
						<div class="f26">是</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">漂浮物：</div>
						<div class="f26">未出现</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">是否在线：</div>
						<div class="f26">在线</div>
					</div>
				</div>
				<div class="block6" v-if="block6_2" style="width: 4rem;">
					<div class="f31 cursor" @click="block6_2 = false">x</div>
					<div class="flex-between flex-center">
						<div class="f27">城南区-001摄像头</div>
						<div class="f28">当前时间: 2023-02-02 19:32:32</div>
					</div>
					<video width="100%" height="100%" controls autoplay style="margin-top:0.22rem">
						<!-- <source src="@/assets/icon/dataScreen/Area.mp4"> -->
						<source src="/api/profile/upload/2025/03/25/Area_20250325203947A002.mp4">
						您的浏览器不支持播放
					</video>
				</div>
			</div>
			<div class="block7 flex-column flex-alignCenter">
				<div class="f30">图例</div>
				<div class="f29"><img style="width:0.1rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen/zc.png" alt="" />正常</div>
				<div class="f29"><img style="width:0.1rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen/lx.png" alt="" />离线</div>
				<div class="f29"><img style="width:0.1rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen/bj.png" alt="" />报警</div>
			</div>

			<div class="right">
				<div class="block3">
					<div class="title">监督评价</div>
					<div class="flex-between flex-alginCenter">
						<div class="b9 flex-column flex-center">
							<div class="f16">20分</div>
							<div class="f17">响应时间</div>
						</div>
						<div class="b9 flex-column flex-center">
							<div class="f16">8H</div>
							<div class="f17">平均处置时长</div>
						</div>
						<div class="b9 flex-column flex-center">
							<div class="f16">6万元</div>
							<div class="f17">抢险总投入</div>
						</div>
						<div class="b9 flex-column flex-center">
							<div class="f16">98%</div>
							<div class="f17">抢险满意度</div>
						</div>
					</div>
					<div class="pjjg"><span class="font2" style="top: -0.05rem;">评价结果与对比</span> </div>
					<div class="flex-between" style="margin:0 auto;width:100%">
						<div id="mainPJJG" style="height:25vh;width:100%;"></div>

					</div>
				</div>
				<div class="block4">
					<div class="title">复盘改进</div>

					<div class="b6 flex-between flex-center">
						<div class="flex-row flex-alignCenter">
							<img style="width:0.5rem;margin-right:0.16rem" mode='widthFix' src="@/assets/icon/dataScreen/lsqx.png" alt="" />
							历史抢险数量
						</div>
						<div class="f5">64</div>
					</div>
					<div class="fpfx" style="width:2rem"><span class="font2" style="top: -0.05rem;">复盘分析</span> </div>
					<div class="flex-between flex-alignCenter">
						<div class="b11 flex-column flex-center">
							<div class="f20">40</div>
							<div class="f21">已完成</div>
						</div>
						<div class="b10 flex-column flex-center">
							<div class="f22">4</div>
							<div class="f21">未完成</div>
						</div>
						<div class="flex-column flex-alignCenter">
							<div class="f23">高发区域于TOP3</div>
							<div class="f24 flex-row flex-alignCenter">
								<div class="z1"></div>北温泉街道 13个/年
							</div>
							<div class="f24 flex-row flex-alignCenter">
								<div class="z2"></div>东阳街道 9个/年
							</div>
							<div class="f24 flex-row flex-alignCenter">
								<div class="z3"></div>水土街道 5个/年
							</div>
						</div>
					</div>
					<div class="list">
						<div class="wrap1 flex-between flex-center">
							<div class="flex-row flex-alignCenter">
								<div class="f18">水量正常</div>
								<div class="f11">2024年重庆市北2024年重庆市北2024年重庆市北</div>
							</div>
							<div class="f12">2024-07-11</div>
						</div>
						<div class="wrap1 flex-between flex-center">
							<div class="flex-row flex-alignCenter">
								<div class="f19">管道阻塞</div>
								<div class="f11">2024年重庆市北2024年重庆市北2024年重庆市北</div>
							</div>
							<div class="f12">2024-07-11</div>
						</div>

					</div>
				</div>
			</div>
		</div>

		<otherPlaces ref="otherPlaces"></otherPlaces>
		<messageDetail ref="messageDetail"></messageDetail>
		<findList ref="findList"></findList>
		<overlyDetailList ref="overlyDetailList"></overlyDetailList>
	</div>
</template>
<script>
import MyOverlay from '@/components/common/dataScreen/sub/MyOverlay.vue';
import gridMap from '@/components/common/dataScreen/baiduMap';
import otherPlaces from '@/components/common/dataScreen/sub/otherPlaces';
import messageDetail from '@/components/common/dataScreen/sub/messageDetail';
import findList from '@/components/common/dataScreen/sub/findList';
import overlyDetailList from '@/components/common/dataScreen/sub/overlyDetailList';
// prettier-ignore
export default {
	components: {
		gridMap,
		MyOverlay,
		otherPlaces,
		messageDetail,
		findList,
		overlyDetailList,
	},
	data() {
		return {
			block6_1:false,
			block6_2:false,
			 polygonPath: [
				{lng: 106.412732, lat: 29.911707},
				{lng: 106.39455, lat: 29.910932},
				{lng: 106.403461, lat: 29.921336}
			],
			mapCenter: { lng: 106.445122, lat: 29.822616 },
			overlayList: [
				{ name: '城南新区摄像头01', lng: 106.445122, lat: 29.822616 ,type:0,select:true,},
				{ name: '城南新区摄像头02', lng: 106.555122, lat: 29.922616 ,type:1,select:false },
				{ name: '城南新区摄像头03', lng: 106.665122, lat: 29.722616 ,type:2,select:true },
			],
			activities: [
				{
					content:
						'百花村左滑坡0301001（裂缝），变形速率748.5mm/d，累计位移：770mm，触发橙色预警。',
					timestamp: '2018-04-12 20:46',
				},
				{
					content:
						'百花村左滑坡0301001（裂缝），变形速率748.5mm/d，累计位移：770mm，触发橙色预警。',
					timestamp: '2018-04-03 20:46',
				},
				{
					content:
						'百花村左滑坡0301001（裂缝），变形速率748.5mm/d，累计位移：770mm，触发橙色预警。',
					timestamp: '2018-04-03 20:46',
				},
				{
					content:
						'百花村左滑坡0301001（裂缝），变形速率748.5mm/d，累计位移：770mm，触发橙色预警。',
					timestamp: '2018-04-03 20:46',
				},
			],
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						},
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						},
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						},
					},
				],
			},
			dataParams: {
				area: '', //地址名称
				date: '',
				// type: 0, //0是全部的（气象局加水利局）， 1是水利局
			},
			value: '',
			date: '',
			active: false,
			data: {
				data1: {},
				data2: {},
				data3: {},
				data4: {},
			},
			optionPJJG :{
				 tooltip: {
					trigger: 'axis'
				},
				color:['rgb(230, 14, 14)','#FFA03A','#B070FF','#01D2FF'],
				legend: {
					data: ['响应时间','平均处置时长', '抢险总投入', '抢险满意度',],
					textStyle: {
					color: '#fff' 
				}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				
				xAxis: {
					type: 'category',
					boundaryGap: false,
				 	 axisLabel: {
						color: '#fff' 
					},
					data: ['新城公司', '蔡家公司', '缙云公司', '文旅公司', '北温泉街道',]
				},
				yAxis: {
					type: 'value',
					 axisLabel: {
						color: '#fff' 
					},
				},
				series: [
					{
					name: '响应时间', 
					type: 'line',
					stack: 'Total',
					smooth: true,
					data: [1, 5, 20, 13,15],
					
					},
					{
					name: '平均处置时长',
					type: 'line',
					stack: 'Total',
					smooth: true,
					data: [5, 6, 3, 4,6],
					
					},
					{
					name: '抢险总投入',
					type: 'line',
					smooth: true,
					stack: 'Total',
					data: [2, 4, 9, 3,5],
					
					},
					{
					name: '抢险满意度',
					type: 'line',
					smooth: true,
					stack: 'Total',
					data: [98, 99, 89, 92,94],
					
					},
					
				]
			},
			optionyjd: {
				title: {
					// text: '特性示例：渐变色 阴影 点击缩放',
					// subtext: '单位/个',
				},
				xAxis: {
					data: ['城中区'],
					title: '单位/个',
					axisLabel: {
						inside: false,
						color: '#fff',
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					z: 10,
				},
				yAxis: {
					name: '单位',
					nameTextStyle: {
						color: '#fff',
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: '#fff',
					},
				},
				dataZoom: [
					{
						type: 'inside',
					},
				],
				series: [
					{
						type: 'bar',
						itemStyle: {
							barBorderRadius: [100],
							color: new this.$echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{ offset: 0, color: '#00CCD2' },
									{ offset: 1, color: '#00A2FF' },
								]
							),
						},
						emphasis: {
							itemStyle: {
								color: new this.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{ offset: 0, color: '#00CCD2' },
										{ offset: 1, color: '#00A2FF' },
									]
								),
							},
						},
						data: [
							// 220, 182, 191, 234, 290, 330, 310, 123, 442, 321,
							// 90, 149, 210, 122, 133, 334, 198, 123, 125, 220,
						],
					},
				],
			},
			peopleData: {},
			cityList: [],
			option : {
					title: {
					text: 'Stacked Line'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
					saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
					name: 'Email',
					type: 'line',
					stack: 'Total',
					data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
					name: 'Union Ads',
					type: 'line',
					stack: 'Total',
					data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
					name: 'Video Ads',
					type: 'line',
					stack: 'Total',
					data: [150, 232, 201, 154, 190, 330, 410]
					},
					{
					name: 'Direct',
					type: 'line',
					stack: 'Total',
					data: [320, 332, 301, 334, 390, 330, 320]
					},
					{
					name: 'Search Engine',
					type: 'line',
					stack: 'Total',
					data: [820, 932, 901, 934, 1290, 1330, 1320]
					}
				]
				},
		};
	},
	computed: {},
	activated() {
	},
	created() {
		
		
		
	},
	mounted() {
		this.dataParams.date = new Date().format('yyyy-MM-dd');
		// this.dataParams.date = '2023-08-11';
	// this.creatChart1('main', 'option');
	this.creatChart1('mainPJJG', 'optionPJJG');


// 	var polygon = new BMapGL.Polygon([
//         new BMapGL.Point(116.387112,39.920977),
//         new BMapGL.Point(116.385243,39.913063),
//         new BMapGL.Point(116.394226,39.917988),
//         new BMapGL.Point(116.401772,39.921364),
//         new BMapGL.Point(116.41248,39.927893)
//     ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
// map.addOverlay(polygon);
		return
		this.init();

	
		

	},
	methods: {
		updatePolygonPath(){
			
		},
			messageDetailShow(data) {
			this.$refs.messageDetail.show();
			var params = [{},{},{},{}];
			setTimeout(() => {
				this.$refs.messageDetail.initData(params);
			}, 0);
		},
		overHidden(){
			console.log('点击标记物3');
			this.block6_1=false
			this.block6_2=false
		},
		overClick(e){
			console.log('点击标记物2', e);
			this.block6_1=!this.block6_1
			this.block6_2=!this.block6_2
			// this.$refs.overlyDetailList.show();
			// setTimeout(() => {
			// 	this.$refs.overlyDetailList.initData(e);
			// }, 0);
			
		},
			findListShow(type) {
			this.$refs.findList.show();
			var params = this.dataParams;
			params.type = type
			setTimeout(() => {
				this.$refs.findList.initData(params);
			}, 0);
		},
			otherPlacesShow(type,area) {
			this.$refs.otherPlaces.show();
			var params = this.dataParams;
			params.type = type
			params.area = area
			setTimeout(() => {
				this.$refs.otherPlaces.initData(params);
			}, 0);
		},
		setCenter() {
			this.mapCenter = { lng: 120.75523, lat: 28.714695 };
			this.overlayList = [
				{ name: '易发预警点', lng: 120.75523, lat: 28.714695 },
			];
		},
		mapReady(locationData) {
			return;
			console.log('locationData', locationData);
			let self = this;
			var map = new BMap.Map('allmap', {
				enableMapClick: false,
			});
			let point = new BMap.Point(120.65523, 28.014695);

			map.setMapType(BMAP_HYBRID_MAP);
			map.centerAndZoom(point, 15);
			// 地图比例尺
			map.addControl(
				new BMap.ScaleControl({
					anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
				})
			);
			// 鼠标滑动缩放
			map.enableScrollWheelZoom(true);
			// console.log(this.$refs.overlay0[0])
			// this.$refs.overlay0[0].draw()
		},
		init() {
			
			this.treecity_data();
			
			this.listArea_data();
		},
		initData() {
			
			//更换区域等需要重新加载
			this.earlyWarning_data();
			this.listArea_data();
			// this.findList_data_test();
			this.findNodeCount_data();
		},
		handleChange(value) {
			console.log(value);
			var cityList = this.cityList
			var mapCenter = { lng: 109.415953, lat: 24.325502 }
			this.dataParams.area = value[1];
			this.initData();
			if(value.length == 1){
				mapCenter = { lng: cityList[0].lng, lat: cityList[0].lat }
			}else{
				cityList[0].children.forEach(item=>{
					if(item.cityname == value[1]){
						mapCenter = { lng: item.lng, lat: item.lat }

					}
				})
			}
			console.log(123,mapCenter)
			this.mapCenter =mapCenter ;
		},
	
		findDiZhi_data(pageNum) {
			var params = this.dataParams;
			this.$myApi.findDiZhi_data(params).then((res) => {
				if (res.code == 200) {
					this.data.data3 = res.data;
				}
			});
		},
		find_data(pageNum) {
			var params = this.dataParams;
			this.$myApi.find_data(params).then((res) => {
				if (res.code == 200) {
					this.data.data2 = res.data;
				}
			});
		},
		findNodeCount_data(pageNum) {
			var params = this.dataParams;
			this.$myApi.findNodeCount_data(params).then((res) => {
				if (res.code == 200) {
					this.data.data3 = res.data;
				}
			});
		},
		listArea_data(pageNum) {
			var params = this.dataParams;
			this.$myApi
				.listArea_data_test(params)
				.then((res) => {
					if (res.code == 200) {
						var data = [];
						var data2 = [];
						res.data.forEach((item) => {
							data.push(item.earlyWarningList.length)
						});
						res.data.forEach((item) => {
							data2.push(item.areaName)
						});
						this.optionyjd.series[0].data = data;
						this.optionyjd.xAxis.data = data2;
						console.log('this.optionyjd',this.optionyjd)
						this.creatChart1('mainyjd', 'optionyjd');
					}
				})
				.catch(() => {});
		},
		// 去第一个学校点
		goSchool(){
			var overlayList = this.overlayList
						overlayList.forEach((item,index)=>{
							if(item.type == 3){
									this.mapCenter = { lng: item.lon, lat: item.lat };
								}
						})
		},
		// 去第一个易发点
		goYF(){
			var overlayList = this.overlayList
						overlayList.forEach((item,index)=>{
							if(item.type == 4){
									this.mapCenter = { lng: item.lon, lat: item.lat };
								}
						})
		},
		// 右上角点击标记物
		overSelect(type) {
			var params = this.dataParams;
			params.type = type

			var overlayList = this.overlayList
				overlayList.forEach((item,index)=>{
					if(item.type ==type){
						overlayList[index].select = true
					}else{

						overlayList[index].select = false
					}
					})
						console.log('sjkdl',overlayList,type)
						// this.$set(this.overlayList, 'fillColor', val);
						this.overlayList=overlayList
						// this.overlayList=[]
		},
		//更新标记物
		findList_data_test(type) {
			var params = this.dataParams;
			params.type = type
			// this.creatChart1('mainPJJG', 'optionfp');
			this.$myApi
				.findList_data_test(params)
				.then((res) => {
					if (res.code == 200) {
						this.mapCenter = { lng: res.data[0].lon, lat: res.data[0].lat };
						
							// res.data.yiFaDianList.forEach(item2=>{
							// let geom = item2.geom
							// geom = geom.substring(6)
							// geom = geom.substring(0,geom.length -1) 
							// geom = geom.split(' ') 

							// 		let lon=geom[0]
							// 		let lat=geom[1]
							// 		res.data.list.push({
							// 			formattedAddress:item2.szXian,
							// 			stationName:item2.szXiang,
							// 			type:4,
							// 			lat: lat,
							// 			lon: lon
							// 		})
							// })
							// console.log('zzz',overlayList)
						this.overlayList=res.data
						this.findListForDataScreen_school()
					}
				})
				.catch(() => {});
		},
		//学校列表
		findListForDataScreen_school(pageNum) {
			var params = this.dataParams;
			params.pageSize = 9999
			params.cityName = this.dataParams.area
			this.$myApi.findListForDataScreen_school(params).then((res) => {
				if (res.code == 200) {
					var overlayList = this.overlayList
						res.data.records.forEach((item2,index2)=>{
									overlayList.push({
										name:item2.schoolName,
										type:'3',
										id:item2.id,
										lat: item2.latitude,
										select : item2.earlyWarningList.length?true:false,
										lon: item2.longitude,
									})
								
							})
							console.log('ass',overlayList)
					this.overlayList=overlayList
					// this.findDiZhiYear_data()
				}
			});
		},
		//易发点列表
		findDiZhiYear_data(pageNum) {
		var params = this.dataParams;
			this.$myApi.findDiZhiYear_data(params).then((res) => {
				if (res.code == 200) {
					var overlayList = this.overlayList
						res.data.forEach((item2,index2)=>{
							let geom = item2.geom
							geom = geom.substring(6)
							geom = geom.substring(0,geom.length -1) 
							geom = geom.split(' ') 

									let lon=geom[0]
									let lat=geom[1]
									overlayList.push({
										formattedAddress:item2.szXian,
										stationName:item2.szXiang,
										
										type:4,
										lat: lat,
										lon: lon
									})
								
							})
							console.log('zzz',overlayList)
					this.overlayList=overlayList
					
				}
			});
		},
		//大屏数据
		earlyWarning_data(pageNum) {
			var params = this.dataParams;

			console.log(3333,'earlyWarning_data')
			// this.creatChart1('mainPJJG', 'optionfp');
			this.$myApi
				.earlyWarning_data_test(params)
				.then((res) => {
					if (res.code == 200) {
						console.log(444,'earlyWarning_data')
						// 饼图
						res.data.allCount =
							res.data.diZhiCount +
							res.data.shanHongCount +
							res.data.qiXiangCount ;
						var data1 =  JSON.parse(JSON.stringify(res.data)) 
						this.data.data1 = data1;
						// this.optionPJJG.series[0].data = [
						// 	{
						// 		value: res.data.qiXiangCount/res.data.allCount*100 || 0,
						// 		name: '极端天气',
						// 	},
						// 	{
						// 		value: res.data.diZhiCount/res.data.allCount*100 || 0,
						// 		name: '地质灾害',
						// 	},
						// 	{
						// 		value: res.data.shanHongCount/res.data.allCount*100 || 0,
						// 		name: '泥石流',
						// 	},
						// ];
						// this.creatChart1('mainPJJG', 'optionPJJG');
	console.log(555,'earlyWarning_data')
						//标记物
						if(res.data.list.length){

							this.mapCenter = { lng: res.data.list[0].lon, lat: res.data.list[0].lat };
						}
							
							res.data.list.forEach((item,index)=>{
								res.data.list[index].type = String(res.data.list[index].type)
								// res.data.list[index].select = res.data.list[index].earlyWarningList.length?true:false
							})

							console.log(321,'earlyWarning_data')
							//易发点标记
							res.data.yiFaDianList.forEach(item2=>{
								let geom = item2.geom
								geom = geom.substring(6)
								geom = geom.substring(0,geom.length -1) 
								geom = geom.split(' ') 

										let lon=geom[0]
										let lat=geom[1]
										res.data.list.push({
											formattedAddress:item2.szXian,
											stationName:item2.szXiang,
											typeName:item2.typeName,
											date:item2.date,
											schoolCount:item2.schoolCount,
											warnLevel:item2.warnLevel,
											type:'4',
											id:item2.id,
											select :item2.earlyWarningList.length?true:false,
											lat: lat,
											lon: lon,
											content:item2.szXian+item2.szXiang,
											name:item2.yhdType
										})
										
							})
							//学校点标记
							res.data.xuexiaoList.forEach((item2,index2)=>{
									res.data.list.push({
										name:item2.schoolName,
										type:'3',
										id:item2.id,
										lat: item2.latitude,
										select : item2.earlyWarningList.length?true:false,
										lon: item2.longitude,
									})
								
							})
							//气象 地质 山洪点标记
							var allList = [...res.data.qiXiangList,...res.data.shanHongList,...res.data.diZhiList,]
							allList.forEach(item2=>{

										res.data.list.push({
											formattedAddress:item2.formattedAddress,
											stationName:item2.stationName,
											typeName:item2.typeName,
											date:item2.date,
											schoolCount:item2.schoolCount,
											warnLevel:item2.warnLevel,
											type:'4',
											id:item2.id,
											select :false,
											lat: item2.lat,
											lon: item2.lon,
											content:item2.content,
											name:item2.typeName
										})
										
							})
							
							console.log('zzz',res.data.list)
						this.overlayList=res.data.list
							console.log(66,'earlyWarning_data')
						// this.findListForDataScreen_school()
					}
				})
				.catch(() => {});
		},
		creatChart1(idName, dataName) {
			console.log('creatChart1',idName, dataName,document.getElementById(idName))
			if(!document.getElementById(idName)){
				console.log('creatChart1',idName, dataName,'没找到元素')
				return
			}
			var myChart = this.$echarts.init(document.getElementById(idName));
			myChart.setOption(this[dataName], true);
			// console.log(myChart, this[dataName]);
		},
		treecity_data(pageNum) {
			var params = this.dataParams;
			this.$myApi.treecity_data(params).then((res) => {
				if (res.code == 200) {
					this.cityList = res.data;
					this.dataParams.area = res.data[0].children[0].cityname;
					this.value = [res.data[0].cityname,res.data[0].children[0].cityname]
					// this.dataParams.area = ;
					// this.value = []
					this.initData();
				}
			});
		},
		draw({ el, BMap, map }) {
			const pixel = map.pointToOverlayPixel(
				new BMap.Point(116.404, 39.915)
			);
			el.style.left = pixel.x - 60 + 'px';
			el.style.top = pixel.y - 20 + 'px';
		},
	},
};
</script>

<style  scoped >
.bg {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
}
.bgbg {
	width: 100%;
	height: 100%;
}
.bgMap {
	width: 6rem;
	position: absolute;
}
.f31 {
	font-size: 0.12rem;
	color: #ffffff;
	position: absolute;
	right: 0.1rem;
	top: 0.05rem;
}
.f30 {
	font-size: 0.14rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 0.1rem;
}
.f29 {
	font-size: 0.12rem;
	color: #ffffff;
}
.block7 {
	width: 0.9rem;
	/* height: 0.94rem; */
	background: rgba(38, 151, 255, 0.4);
	box-shadow: 0px 2px 12px 0px rgba(0, 125, 227, 0.4);
	border: 1px solid rgba(0, 125, 227, 0.4);
	position: absolute;
	right: 5.2rem;
	bottom: 0.24rem;
	color: #fff;
}
.f28 {
	font-size: 0.12rem;
	color: #ffffff;
}
.f27 {
	font-size: 0.12rem;
	color: #ffffff;
	background: #0b789a;
	border: 1px solid #40c0e2;
	padding: 0.05rem 0.22rem;
}
.f26 {
	font-size: 0.12rem;
	color: #ffffff;
	margin-bottom: 0.08rem;
	max-width: 2.98rem;
}
.f25 {
	font-size: 0.12rem;
	color: #ffffff;
	margin-bottom: 0.08rem;
	width: 0.8rem;
}
.block6 {
	position: relative;
	display: inline-block;
	background: #0c283e;
	border-radius: 0px 0px 0px 0px;
	border: 4px solid #035abe;
	opacity: 0.89;
	padding: 0.14rem;
}
.z3 {
	width: 0.08rem;
	height: 0.08rem;
	background: #e8464c;
	margin-right: 0.05rem;
}
.z2 {
	width: 0.08rem;
	height: 0.08rem;
	background: #ffa647;
	margin-right: 0.05rem;
}
.z1 {
	width: 0.08rem;
	height: 0.08rem;
	background: #4aeaff;
	margin-right: 0.05rem;
}
.f24 {
	font-size: 0.14rem;
	color: #7dbdd5;
}
.f23 {
	font-size: 0.14rem;
	color: #7dbdd5;
}
.f22 {
	font-size: 0.18rem;
	color: #00d4ff;
}
.f21 {
	font-size: 0.18rem;
	color: #fff;
}
.f20 {
	font-size: 0.24rem;
	color: #57ffbc;
}
.b10 {
	background-image: url('../../assets/icon/dataScreen/b10.png');
	background-repeat: no-repeat;
	height: 1.16rem;
	width: 1.16rem;
	position: relative;
	background-size: 100% 100%;
	box-sizing: border-box;
}
.b11 {
	background-image: url('../../assets/icon/dataScreen/b11.png');
	background-repeat: no-repeat;
	height: 1.16rem;
	width: 1.16rem;
	position: relative;
	background-size: 100% 100%;
	box-sizing: border-box;
}
.b9 {
	background-image: url('../../assets/icon/dataScreen/b9.png');
	background-repeat: no-repeat;
	height: 0.67rem;
	width: 0.95rem;
	position: relative;
	background-size: 100% 100%;
	box-sizing: border-box;
}
.f19 {
	border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
	padding: 0.06rem;
	margin-right: 0.1rem;
	font-size: 0.12rem;
	color: #ffffff;
	background: rgba(232, 70, 76, 0.24);
	border: 0.01rem solid #e8464c;
}
.f18 {
	background: rgba(0, 241, 233, 0.24);
	border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
	border: 0.01rem solid #00f1e9;
	padding: 0.06rem;
	margin-right: 0.1rem;
	font-size: 0.12rem;
	color: #ffffff;
}
.f17 {
	font-size: 0.15rem;
	color: #ffffff;
}
.f16 {
	font-size: 0.2rem;
	color: #00f1e9;
}
.f15 {
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 0.14rem;
	color: #ffffff;
}
.f14 {
	font-family: Digital Numbers, Digital Numbers;
	font-weight: 400;
	font-size: 0.2rem;
	color: #ffcf71;
}
.f13 {
	font-family: Inter, Inter;
	font-weight: bold;
	font-size: 0.16rem;
	color: #00fff0;
	margin-bottom: 0.1rem;
}
.wrap2 {
	background: rgba(238, 237, 255, 0.1);
	padding: 0.16rem;
	width: 2.68rem;
	margin-right: 0.16rem;
	/* height: 0.87rem; */
	margin-top: 0.2rem;
}
.f12 {
	font-size: 0.14rem;
	color: #ffffff;
}
.f11 {
	font-weight: bold;
	font-size: 0.16rem;
	color: #ffffff;
	max-width: 2rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.f10 {
	background: #0244d2;
	border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
	border: 0.01rem solid #0244d2;
	padding: 0.06rem;
	margin-right: 0.1rem;
	font-size: 0.12rem;
	color: #ffffff;
}
.wrap1 {
	width: 100%;
	background: rgba(9, 85, 155, 0.1);
	box-shadow: inset 0rem 0rem 0.36rem 0rem rgba(34, 88, 170, 0.6);
	border-radius: 5px;
	border: 0.01rem solid #1d568c;
	margin-bottom: 0.1rem;
	margin-top: 0.2rem;
	padding: 0.1rem;
	box-sizing: border-box;
}
.list {
	height: 1.44rem;
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}
.list::-webkit-scrollbar {
	display: none;
}
.f9 {
	font-weight: 400;
	font-size: 0.24rem;
	color: #00fff0;
}
.f8 {
	font-weight: 400;
	font-size: 0.24rem;
	color: #e7464c;
}
.f7 {
	font-weight: 400;
	font-size: 0.24rem;
	color: #ffdc5f;
}
.f6 {
	font-weight: 400;
	font-size: 0.16rem;
	color: #e6f7ff;
}
.gridWrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, 1.2rem);
	grid-row-gap: 0.1rem;
	grid-column-gap: 0.4rem;
}
.b8 {
	background-image: url('../../assets/icon/dataScreen/b8.png');
	background-repeat: no-repeat;
	height: 0.48rem;
	width: 1.2rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.1rem;
	box-sizing: border-box;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 0.16rem;
	color: #e6f7ff;
}
.f3 {
	font-weight: 400;
	font-size: 0.24rem;
	color: #00fff0;
}
.f4 {
	font-weight: 400;
	font-size: 0.15rem;
	/* color: gray; */
	color: #fff;
}
.f5 {
	font-weight: 400;
	font-size: 0.24rem;
	color: #00fff0;
}
.title {
	font-weight: bold;
	font-size: 0.16rem;
	color: #ffffff;
	margin-left: 0.15rem;
}
.left {
	position: absolute;
	left: 0;
	top: 1rem;
}
.center {
	position: absolute;
	left: 5.29rem;
	top: 1rem;
}
.right {
	position: absolute;
	right: 0;
	top: 1rem;
}
.font1 {
	font-family: Digital Numbers, Digital Numbers;
	font-weight: 400;
	font-size: 0.24rem;
	color: #00fff0;
	position: relative;
	top: -0.08rem;
	margin-left: 0.1rem;
}
.font2 {
	font-family: Digital Numbers, Digital Numbers;
	font-weight: 400;
	font-size: 0.2rem;
	color: #ffffff;
	position: relative;
	top: -0.08rem;
	margin-left: 0.35rem;
}
.fpfx {
	background-image: url('../../assets/icon/dataScreen/fpfx.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.pjjg {
	background-image: url('../../assets/icon/dataScreen/pjjg.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.gzsb {
	background-image: url('../../assets/icon/dataScreen/gzsb.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.hjjh {
	background-image: url('../../assets/icon/dataScreen/hjjh.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.xxxj2 {
	background-image: url('../../assets/icon/dataScreen/xxxj2.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.b6 {
	background-image: url('../../assets/icon/dataScreen/b6.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.8rem;
	width: 100%;
	position: relative;
	background-size: 100% 100%;
	padding: 0.2rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}

.block5 {
	background-image: url('../../assets/icon/dataScreen/block5.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 1.8rem;
	width: 8.63rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.1rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	/* margin-left: 0.1rem; */
}
.block1 {
	background-image: url('../../assets/icon/dataScreen/block1.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 48vh;
	width: 4.8rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.02rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	margin-left: 0.1rem;
	margin-bottom: 0.1rem;
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}

.block1::-webkit-scrollbar,
.block2::-webkit-scrollbar,
.block3::-webkit-scrollbar,
.block4::-webkit-scrollbar {
	display: none;
}
.datepicker {
	position: absolute;
	right: 2.1rem;
	top: 0.2rem;
}
.block2 {
	background-image: url('../../assets/icon/dataScreen/block1.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 39.2vh;
	width: 4.8rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.02rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	margin-left: 0.1rem;
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}
.block3 {
	background-image: url('../../assets/icon/dataScreen/block3.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 42.1vh;
	width: 4.8rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.02rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	margin-left: 0.1rem;
	margin-bottom: 0.1rem;
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}
.block4 {
	background-image: url('../../assets/icon/dataScreen/block4.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 45.3vh;
	width: 4.8rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.02rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	margin-left: 0.1rem;
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}
.top {
	/* height: 1rem; */
	height: 9.2vh;
	width: 19.2rem;
	background-image: url('../../assets/icon/dataScreen/top.png');
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;

	/* background-position: center; */
}
.cursor {
	cursor: pointer;
}
.content {
	z-index: 2000;
	/* min-height: 100vh; */
	/* width: 100vw; */
	overflow-x: hidden;
	/* background: #000; */
	box-sizing: border-box;
	/* position: relative; */
}
.map {
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
}
.sample {
	color: #fff;
	text-align: center;
	padding: 10px;
	position: absolute;
	width: 5rem;
	height: 4rem;
}
.sample.active {
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
}
.backgrountMap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
}
#allmap {
	width: 100%;
	height: 100%;
}
.page {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}
</style>
<style>
.el-date-editor .el-range-separator {
	color: #fff;
}
.el-date-editor .el-range-input {
	background: RGBA(9, 39, 78, 1);
	color: #fff;
}
.el-timeline-item__content {
	background: rgba(255, 255, 255, 0.1);
	padding: 0.18rem;
}
.el-timeline-item__timestamp {
	font-size: 0.18rem;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
.el-input__inner {
	background: RGBA(9, 39, 78, 1) !important;
	font-size: 0.16rem !important;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1) !important;
	border: 1px solid #293246 !important;
	border-radius: 0.24rem 0.24rem 0.24rem 0.24rem !important;
}
.el-date-editor.el-input {
	border-radius: 0.24rem 0.24rem 0.24rem 0.24rem;
	width: 2rem !important;
}
html {
	/* 移动端设计图 */
	/* 100vw = 750px
        1px = 100/750 vw  =0.13333vw
        100px = 13.33vw
        1rem = 1font-size
        font-size: 13.33vw 以100px为单位 
        font-size不能小于12px 否则qq uc浏览器等会按照12px计算
     */
	/* font-size: 13.33vw; */

	/* 网页端设计图 */
	/* 100vw = 1920px
        1px = 100/1920 vw  =0.052083333333vw
        100px = 5.20vw
        1rem = 1font-size
        font-size: 5.20vw 以100px为单位 
        font-size不能小于12px 否则qq uc浏览器等会按照12px计算
     */

	font-size: 5.2vw;
}
</style>
